import React, { memo, useEffect } from 'react';
import Slider from '@/components/slider';
import RecommendList from '@/components/list';
import Scroll from '@/baseUI/scroll';
import Loading from '@/baseUI/loading';
// 引入 forceCheck 方法
import { forceCheck } from 'react-lazyload';
import { Content } from './style';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import {
  getBannerListAction,
  getRecommendListAction,
} from './store/actionCreators';
import { renderRoutes } from 'react-router-config';
export default memo(function Recommend(props) {
  const { bannerList, recommnedList, enterLoading, playList } = useSelector(
    (state) => ({
      enterLoading: state.recommend.enterLoading,
      bannerList: state.recommend.bannerList,
      recommnedList: state.recommend.recommendList,
      playList: state.player.playList,
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  useEffect(() => {
    // 如果页面有数据，则不发请求
    if (!bannerList.length) {
      dispatch(getBannerListAction());
    }
    if (!recommnedList.length) {
      dispatch(getRecommendListAction());
    }
  }, [dispatch, bannerList.length, recommnedList.length]);

  return (
    // 部容器必须是固定高度，不然没法滚动。而 Content 就是这个外部容器 相当于wrapper
    <Content play={playList.length}>
      <Scroll className="list" onScroll={forceCheck}>
        {/* 相当于content */}
        <div>
          <Slider bannerList={bannerList}></Slider>
          <RecommendList recommendList={recommnedList}></RecommendList>
        </div>
      </Scroll>
      {enterLoading ? <Loading></Loading> : null}
      {renderRoutes(props.route.routes)}
    </Content>
  );
});
